//1.引入Vue
import Vue from "vue";

//2.引入VueRouter
import VueRouter from "vue-router";

//引入组件
import Login from "../pages/Login/login.vue"
import Home from "../pages/Home/home.vue"
import News from "../pages/Home/News"
import Music from "../pages/Home/Music"

//3.使用插件
Vue.use(VueRouter);

//4.创建路由器对象
export default new VueRouter({
    //在路由器对象中配置路由表
    routes:[
        {path:"/login" , component: Login , name: "login"},
        {
            path:"/home" , 
            component: Home,
            //在某个路由规则中如果有默认子路由,则在当前路由中不再书写name属性
            //因为使用<router-link>标签中to的对象写法用name属性跳转路由的时候会直接跳到默认子路由上
            name: "home",
            children:[
                {path:"news" , component: News , name: "news"},
                {path:"music" , component: Music , name: "music"},
                /* 二级路由重定向的方式1:redirect也适用于多级路由 路径也会更改 */
                {path: "/" , redirect: "/home/news"}

                /* 二级路由重定向的方式2:默认子路由 路径还是/home */
                // {path: "/" , component: News}
            ]
        },
        /* 通过路由规则的redirect属性，指定一个新的路由地址，可以很方便地设置路由的重定向 */
        {path: "/" , redirect: "/home"}
    ]
})